<template>
    <div class="login">
          <el-dialog width="30%" title="登录" :visible.sync="modelShow" 		   :show-close="false"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :before-close="closeCallback()"
    >
        <el-form ref="form" :model="form" size="small" label-width="100px">
            <el-row>
                <el-form-item label="用户名：" >
                    <el-input class="search-input" v-model="form.id"/>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input type="password" class="search-input" v-model="form.pw"/>
                </el-form-item>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">

            <el-button type="primary" @click="login('form')">确 定</el-button>
        </div>
    </el-dialog>
    </div>
</template>

<script>
 export default {
        name:'login',
        data() {
            return {
                //是否显示本面板
                modelShow: false,
                //是否可以关闭
                canClose: false,
                //表单数据
                form: {
                    id: '',
                    pw: '',
                },
            }
        },
        mounted: function () {
            const that = this;
            //如果用户没有登录，则打开登录界面
            if (window.localStorage) {
                const data = JSON.parse(localStorage.getItem("is_login"));
                if (data) {
                    that.modelShow = false;
                } else {
                    that.modelShow = true;
                }
            }
        },
        methods: {
            //登录
            login: function () {
                //这里使用的是固定的用户名和密码。admin/111111
                //校验密码
                if (this.form.pw !== this.$store.state.user_info.pw) {
                    this.$message({
                        type: "danger",
                        message: "用户名或密码错误!"
                    });
                    return;
                }
                //校验用户
                console.log(this.$store.state.user_info.id)
                if (this.form.id === this.$store.state.user_info.id) {
                    this.modelShow = false;
                    //把登录数据写入到session
                    if (window.localStorage) {
                        localStorage.setItem("is_login", "true");
                    }
                } else {
                    this.$message({
                        type: "danger",
                        message: "用户名或密码错误!"
                    });
                }
            },
            //关闭登录窗口前的回调(如果用户没有登录成功，则再次打开本窗口，以达到强制登录的目的)
            closeCallback: function () {
                if (window.localStorage) {
                    const data = JSON.parse(localStorage.getItem("is_login"));
                    if (data) {
                        this.modelShow = false;
                    } else {
                        this.modelShow = true;
                    }
                }
            }
        },
    }
</script>